<template>
  <template v-for="(data, index) of routerData" :key="index">
    <!-- 有下级菜单 -->
    <el-sub-menu :index="data.path" :key="index" v-if="data.children && data.children.length">
      <template #title>
        <el-icon v-if="data.meta.icon">
          <component :is="data.meta.icon"></component>
        </el-icon>
        <span class="title-menu">{{ data.meta.title }}</span>
      </template>
      <SideBarItem :routerData="data.children"></SideBarItem>
    </el-sub-menu>
    <!-- 无下级菜单 -->
    <el-menu-item :index="data.path" v-else>
      <el-icon v-if="data.meta.icon">
        <component :is="data.meta.icon"></component>
      </el-icon>
      <span class="title">{{ data.meta.title }}</span>
    </el-menu-item>
  </template>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'
interface RouteType {
  path: string
  children: [RouteType]
  meta: {
    icon: string
    title: string
  }
}
defineProps({
  routerData: {
    type: Array as unknown as PropType<[RouteType]>,
    default: () => [],
  },
})
</script>
<style lang="scss" scoped></style>
